<template>
  <el-popover
    placement="bottom"
    width="700"
    trigger="click"
  >
    <div class="uploadIcon" slot="reference">
      <img src="@/assets/image_library/menu/uploadListIcon.png"/>
    </div>
    <div class="uploadContent">
      <div class="popoverTitle">
        <div class="title">正在上传</div>
        <div class="cancelAll" @click="cancelAllUpload"
             v-if="uploadArr.filter(item => item.status === 0||item.status === 1||item.status === 4).length!==0"
        >全部取消
        </div>
      </div>
      <div class="uploadList">
        <el-table
          :data="uploadArr"
          style="width: 100%"
        >
          <el-table-column
            prop="fileName"
            align="left"
            label="文件名"
            width="180"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div class="fileName">
                <img
                  :src="FileImage[scope.row.fileName.slice(scope.row.fileName.lastIndexOf('.') + 1)]? FileImage[scope.row.fileName.slice(scope.row.fileName.lastIndexOf('.') + 1)]:require('@/assets/image_library/netmini.png')"
                />
                <div>{{ scope.row.fileName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fileSize"
            label="上传进度"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <div class="textGreen">
                {{ scope.row.progress }}%
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fileSize"
            label="大小"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <div class="textGreen">
                {{ convertBytes(scope.row.fileSize * (scope.row.progress / 100)) }}/{{ convertBytes(scope.row.fileSize) }}
              </div>

            </template>
          </el-table-column>
          <el-table-column
            prop="fileSize"
            label="状态"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              {{ status[scope.row.status] }}{{ scope.row.status === 0 ? '(' + scope.row.md5progress + '%)' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" icon="el-icon-check" type="text" v-if="scope.row.status === 2"/>
              <el-button size="mini" icon="el-icon-close" type="text" v-if="scope.row.status === 0||scope.row.status === 1"
                         @click="cancelUpload(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </el-popover>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { convertBytes } from '@/views/library_homePage/utils/files'

export default {
  data() {
    return {
      isshow: false,
      FileImage: {
        'pdf': require('@/assets/image_library/pdfmini.png'),
        'docx': require('@/assets/image_library/wordmini.png'),
        'dov': require('@/assets/image_library/wordmini.png'),
        'xls': require('@/assets/image_library/excelmini.png'),
        'xlsx': require('@/assets/image_library/excelmini.png'),
        'ppt': require('@/assets/image_library/pptmini.png'),
        'pptx': require('@/assets/image_library/pptmini.png'),
        'txt': require('@/assets/image_library/textmini.png'),
        'zip': require('@/assets/image_library/zipmini.png'),
        'rar': require('@/assets/image_library/zipmini.png'),
        'mp3': require('@/assets/image_library/musicmini.png'),
        'mp4': require('@/assets/image_library/videomini.png')
      },
      status: ['计算资源中', '上传中', '上传成功', '上传失败', '排队中'],
      convertBytes: function(num) {
        return convertBytes(num)
      }
    }
  },
  computed: {
    ...mapGetters('uploadList', ['uploadArr'])
  },
  methods: {
    ...mapMutations('uploadList', ['removeUploadItem']),
    cancelUpload(row) {
      if (row.status === 1) {
        row.cancel()
        this.removeUploadItem(row.id)
      } else if (row.status === 0) {
        row.bmfobj.abort()
      }
    },
    cancelAllUpload() {
      if (this.uploadArr.length === 0 || this.uploadArr.filter(item => item.status === 1 || item.status === 0).length === 0) {
        this.$message.warning('没有正在上传的文件')
        return
      }
      this.uploadArr.forEach(item => {
        if (item.status === 1) {
          item.cancel()
          this.removeUploadItem(item.id)
        } else if (item.status === 0) {
          item.bmfobj.abort()
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-table .el-table__header-wrapper tr th {
  background: #ffffff;
}

.uploadIcon {
  img {
    width: 19px;
    height: 13px;
  }

}

.textGreen {
  color: #1ab394;
}

.uploadContent {
  height: 425px;

  .popoverTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;

    .title {
      font-size: 18px;
      font-weight: 500;
    }

    .cancelAll {
      color: #1ab394;
      font-size: 14px;
    }
  }

  .fileName {
    display: flex;
    align-items: center;

    img {
      width: 15px;
      height: 16px;
      margin-right: 10px;
    }
  }
}

</style>
